import React, { useEffect, useState } from 'react';
import { Table, Pagination, DatePicker, Space, Typography, Select, Input, Radio } from 'antd';
import { AudioOutlined } from '@ant-design/icons';
import axios from '../../axios';


function Goodsevaluate() {
    // 请求数据
    const [list, setList] = useState([])
    const [totals, setTotal] = useState(0)
    const [limits, setlimit] = useState(10)
    const [pages, setPage] = useState(1)

    const getList = async () => {
        let { list, limit, page, total } = await axios.get("/store/product/reply/list", {
            params: {
                page: pages,
                limit: limits,
                isReply: reply,
                dateLimit: placement,
                nickname: nickname,
                productSearch:goods,
                isDel: false,
                uid: "",
                temp: new Date().getTime(),
            }
        })
        setList(list)
        setTotal(total)
        setlimit(limit)
    


    }
    //选项卡
    const [placement, SetPlacement] = useState('');// tabs状态
    const placementChange = (e) => {
        console.log(e);
        SetPlacement(e.target.value);
        //   console.log(e.target.value);
        //   getList(e.target.value)
    };

    //时间选择器
    const { RangePicker } = DatePicker;

    // Disabled 7 days from the selected date
    const disabled7DaysDate = (current, { from }) => {
        if (from) {
            return Math.abs(current.diff(from, 'days')) >= 7;
        }
        return false;
    };

    // Disabled 6 months from the selected date
    const disabled6MonthsDate = (current, { from }) => {
        if (from) {
            const curMonth = current.year() * 12 + current.month();
            const fromMonth = from.year() * 12 + from.month();
            return Math.abs(fromMonth - curMonth) >= 6;
        }
    }
    //搜索框
    const { Search } = Input;
    const suffix = (
        <AudioOutlined
            style={{
                fontSize: 16,
                color: '#1677ff',
            }}
        />
    );
    const [goods,setGoods]=useState("")
    const goodsSearch = (value) => {
          setGoods(value)
    };
    const  [nickname,setNickName]=useState("")
    const nickNameSearch=(value)=>{
        setNickName(value)
    }
    //状态选择
    const [reply,setreply]=useState("")
    const onChangeSelect = (value) => {
        // console.log(`selected ${value}`);
        setreply(value)
    };
    const onSearch = (value) => {
        console.log('search:', value);
    };

    //
    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: "id"
        },
        {
            title: '商品信息',
            dataIndex: 'storeProduct',
            key: "storeProduct",
            render: (_, record) => {
                if (record.storeProduct) {
                    return (record.storeProduct.keyword)
                }

            }
        },
        {
            title: '用户名称',
            dataIndex: 'nickname',
            key: "nickname"
        },

        {
            title: '商品评分',
            dataIndex: 'productScore',
            key: "productScore"
        },
        {
            title: '服务评分',
            dataIndex: 'serviceScore',
            key: "serviceScore"
        },
        {
            title: '评价内容',
            dataIndex: 'comment',
            key: "comment"
        },
        {
            title: '回复内容',
            dataIndex: 'id',
            key: "id"
        },
        {
            title: '评价时间',
            dataIndex: 'updateTime',
            key: "updateTime"
        },
        {
            title: '操作',
            dataIndex: 'id',
            key: "id"
        },

    ];


    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    const onSelectChange = (newSelectedRowKeys) => {
        console.log('selectedRowKeys changed: ', newSelectedRowKeys);
        setSelectedRowKeys(newSelectedRowKeys);
    };
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
        selections: [
            Table.SELECTION_ALL,
            Table.SELECTION_INVERT,
            Table.SELECTION_NONE,
            {
                key: 'odd',
                text: 'Select Odd Row',
                onSelect: (changeableRowKeys) => {
                    let newSelectedRowKeys = [];
                    newSelectedRowKeys = changeableRowKeys.filter((_, index) => {
                        if (index % 2 !== 0) {
                            return false;
                        }
                        return true;
                    });
                    setSelectedRowKeys(newSelectedRowKeys);
                },
            },
            {
                key: 'even',
                text: 'Select Even Row',
                onSelect: (changeableRowKeys) => {
                    let newSelectedRowKeys = [];
                    newSelectedRowKeys = changeableRowKeys.filter((_, index) => {
                        if (index % 2 !== 0) {
                            return true;
                        }
                        return false;
                    });
                    setSelectedRowKeys(newSelectedRowKeys);
                },
            },
        ],
    };



    const onChangePage = (val,b) => {
        console.log(val,b);
        setPage(val)
        setlimit(b)
        // getList()
    }
    useEffect(() => {
        getList()
    }, [placement,goods,nickname,reply,pages,limits])
    const onchangeTime=(e,time)=>{
        // console.log(time.join(","));
        SetPlacement(time.join(","))
    }
  
    return (

        <div className='whitebg'>

            <div>
                <span style={{ fontSize: "25px", }}>时间选择:</span>
                {/* 选项卡 */}
                <Radio.Group value={placement} onChange={placementChange}>
                    <Radio.Button value=" ">全部</Radio.Button>
                    <Radio.Button value="today">今天</Radio.Button>
                    <Radio.Button value="yesterday">昨天</Radio.Button>
                    <Radio.Button value="lately7">最近7天</Radio.Button>
                    <Radio.Button value="lately30">最近30天</Radio.Button>
                    <Radio.Button value="month">本月</Radio.Button>
                    <Radio.Button value="year">本年</Radio.Button>
                </Radio.Group>
                {/* 时间 */}
                <Space direction="vertical">
                    {/* <Typography.Title level={5}>7 days range</Typography.Title> */}
                    <RangePicker onChange={onchangeTime} disabledDate={disabled7DaysDate} />
                </Space>
            </div>


            {/* 状态 */}
            <div>
                <span style={{ fontSize: "25px", }}>评价状态:</span>
                <Select
                    showSearch
                    placeholder="Select a person"
                    optionFilterProp="label"
                    onChange={onChangeSelect}
                    onSearch={onSearch}
                    options={[
                        {
                            value: '1',
                            label: '以回复',
                        },
                        {
                            value: '0',
                            label: '未回复',
                        },

                    ]}
                />
            </div>

            <div>
                <span style={{ fontSize: "25px", }}>商品搜索:</span>
                {/* 搜索 */}
                <Space>
                    <Search placeholder="input search text" onSearch={goodsSearch} enterButton />
                </Space>
            </div>
            <div>
                <span style={{ fontSize: "25px", }}>用户名称:</span>
                {/* 搜索 */}
                <Space>
                    <Search placeholder="input search text" onSearch={nickNameSearch} enterButton />
                </Space>
            </div>

            {/* 表格 */}
            <Table columns={columns}
                rowSelection={rowSelection}
                dataSource={list}
                rowKey="id"
                pagination={{
                    defaultCurrent: pages,
                    total:totals,
                    showTotal:() => `总共${totals}`,
                    onChange:onChangePage
                }}

            />
            {/* <Pagination
                total={totals}
                showSizeChanger
                showQuickJumper
                showTotal={(total) => `Total ${total} items`}
            /> */}
        </div>

    );
}

export default Goodsevaluate;